DeFi 서비스들의 UXUI 살펴보기

좋은 프로덕트란 어떤 기술을 사용하던 별 다른 지식 없이도 고객이 목표를 달성하기까지 막힘이 없어야한다. Dapp의 일반 사용자가 점점 늘어나는 추세이기 때문에 프로덕트를 제공하는 회사측에서도 더 많은 이용자를 끌어오기 위해 한 번 더 신경 써야 할 부분이 UX라고 생각한다.

현재 대부분의 크립토 프로덕트는 사용자가 블록체인의 메커니즘을 잘 이해하고 있다고 가정한다. 정보 없이 직관적인 이용이 가능하면 베스트지만 서비스의 기능에 따라 적절한 안내와 보충설명이 필요하다. DeFi 앱의 경우 별도의 문서나 화이트페이퍼를 찾아봐야하며 블록체인과 DeFi 이용 경험이 없다면 절차와 용어가 낯설고 바로 이해하기 어려운 경우가 많다.

수익이 그 목적이기 때문에 더 많은 수익이 예상되는 서비스를 선택하는 것이 당연하지만 상품에 크게 차이가 없다면 초기 유입자를 끌어모으기 위해 UX를 제대로 신경을 써야한다고 생각한다. 토스 증권을 떠올려보면 답이 나온다. 몇년 전 처음 주식과 펀드에 입문했을 당시 MTS를 이용했는데, 분명 모바일 환경이지만 어릴때 부모님 어깨 너머로 보았던 HTS와 크게 다르지 않은 것을 보고 IT산업의 발전 속도가 이렇게 느린것인가 하고 한탄 했던 적이 있는다. 그러나 요즘은 금융 서비스들도 UX/UI가 좋은 앱들이 인기가 많은듯 하다. 특히 젊은 신규 투자자들의 유입이 많다고 하니, DeFi 역시 마찬가지아닐까?

출처: koscom 뉴스룸 - 이용자 중심으로 진화하는 금융투자업계 MTS의 UI/UX 전략

DeFi 서비스별 UX 살펴보기

[사례1: SushiSwap]

다국어 지원을 한다는 점은 굿.

하지만 유동성을 해제할때의 주의사항, 참여 절차 등 사용자 입장에서 중요하게 체크해야하는 부분은 영어로 제공하고 있다.

표면적으로는 다국어 지원을 하는것처럼 보이지만 작은 글씨로 쓰여져 있거나 숨겨져 있는 대부분의 중요한 참고사항들은 영어.

대부분의 다른 서비스들도 마찬가지이지만 주의사항에 대한 안내를 중요하게 생각하고 있지 않다는 뜻이기도 하다.

[i]에 마우스 오버시 참여 절차를 안내하는데, 왜 이곳에 위치한 것인지, 적절한 위치에 있는 것인지는 고민이 필요할 듯 하다.

파밍 풀 목록에서 어떤 토큰으로 Reward가 주어지는지 알기 쉽게 표시해 둔 것이 좋았음.

그러나 컴퓨터로 보았던 Reward(보상) 항목이 모바일로 접속할 때 보이지 않았다.

스크롤로 드래그 가능하게 하여 모든 정보를 확인 가능한것이 더 좋았을 것.

스시스왑은 애널리틱스메뉴가 기존 사이트를 벗어나지 않는다. 다른 대부분 프로젝트들의 경우 대부분 애널리틱스는 별도의 사이트로 연결된다.

처음에는 사이트가 새로 오픈되는것이 번거로워 스시스왑처럼 한 사이트에서 동작이 이뤄지는 것이 좋다고 느꼈는데 오히려 다른 사이트로 이동하는것이 별개의 사이트인것을 인지하면서 애널리틱스 내부의 파밍이나 풀 등의 중복되는 메뉴가 있어도 복잡하다고 느끼지 않게되었다.

호불호가 갈릴만한 것이라 생각됨.

현재 평균 Gas를 표시해둔 것이 좋았음.

스시스왑의 경우 이용할 수 있는 메뉴가 많아서 모든 페이지에서 볼수 있도록 상단이나 하단 바의 주소옆에 가스비를 표기하는게 나을 것 같다.

(+2022.2.3)

2021년 12월에 다른 목적으로 작성했던 글에서 가져온 내용이 많아서 현재는 달라진 점도 있었는데, 예를 들어 이제 파밍풀 화면에서도 모바일에서 스크롤 지원을한다.

그리고 이전엔 ‘보상토큰 / DAY’라고 표기되어 하루에 받는 보상임을 알수 있었는데 현재는 DAY 표기가 사라져서 모호해진 면이 아쉽다.

하지만 애널리틱스 메뉴의 Farm에서는 Annual/Monthly/Daily APR를 볼수 있고, Daily Rewards 라 정확히 표기되어있다.

애널리틱스의 다른 메뉴를 통해 들어가야 Farm메뉴를 볼 수 있는것으로 보아, 기존 애널리틱스에는 Farm메뉴가 없던것이 아닐까하고 추측한다. 클릭시 차트나 다른 지표를 볼수 있는것도 아니라서 열심히 업데이트 하고 있는것이라 생각한다.

[SushiSwap - Farm] (2021.12) 토큰을 대표하는 이미지가 눈에 들어오고, 하루에 얼만큼의 보상을 받는지 알수 있다.

[SushiSwap - Farm] (2022.2) 배경색이 사라지며 UI가 더 깔끔해졌다. 하지만 Rewards가 얼마동안 받는 보상인지 알 수 없어졌다.

왜 Farm메뉴가 Onsen인가 했더니 일본어로 온천이 Onsen.. 나름 컨셉이니 이해가 되고. 메뉴명까지 Onsen으로 바꾸지만 않으면 괜찮을 것 같다. 이왕이면 온천 이미지도 넣어주면 좋을 듯.

[SushiSwap - Analytics - Farms] (2022. 2)

그리고 모바일에서 메뉴버튼의 위치가 오른쪽 상단에서 왼쪽 상단으로 변경되었다. 이유가 무엇일까? 처음에는 단순하게 생각해서 많은 디파이 앱들의 메뉴가 왼쪽에 있다는 사실을 고려해 사용자에게 익숙한 위치로 이동 시킨것 같다고 생각했는데, 다시보니 메뉴가 왼쪽에 있는 경우가 많은게 사실인지도 모르겠다는 의문이 들었다.

많이 포크하는 Goose기반 프론트엔드 툴킷은 메뉴가 오른쪽에 있긴하지만 대부분 오래 이용되는 프로젝트들이 아니고, 확인해본 결과 TVL 1~10순위 DeFi앱들의 절반은 오른쪽 상단에 햄버거버튼(석삼버튼)이 위치하고 나머지는 제각각이다.

오른손잡이가 메뉴 선택을 하기에는 바뀌기 이전이 더 편하기도하다. 또, 아래 이미지를 비교해보아도 왼쪽에 로고가 있는게 더 보기에 나아 보인다.

이렇게 모바일 화면으로 비교해보니 더 눈에 띄는것은 확실히 이전보다 한 화면에 표현 가능한 정보의 수가 늘어났다. 👍

[사례2: Yearn Finance]

모바일에서도 메뉴선택이 쉽고, 메뉴를 설명하는 영역이 존재함.

컴퓨터 화면에서 좌측에 있던 메뉴가 모바일 화면에서는 하단으로 내려와 메뉴 선택이 편리해보인다. 메뉴 설명을 위한 영역이 따로 있다는 점이 다른 유사앱들과 달라 인상적이었다. 메뉴 설명이 좀 길어서 한 눈에 들어오지 않는다는 단점 아닌 단점이 있지만, 없는 것 보다는 자세한게 나으니까.

[사례3: Uniswap]

선택한 메뉴에 대한 설명을 링크로 남겨둠.

화면안에 모든 것을 담기에는 한계가 있고 상세한 설명이 필요한 서비스이기때문에 자세한 설명이 있는 페이지로 연결해놓은 것은 좋다고 생각한다.

모바일에서도 메뉴선택이 편리함

워낙 구성이 심플하기때문에 데스크탑에서 보았던 상단의 메뉴가 모바일에서 하단으로 내려왔다는 점 외에는 차이가 없었다.

전체 풀 정보를 다른 사이트에서 확인해야한다는 점이 호불호가 갈릴것 같다.

차트 메뉴나 풀 메뉴의 상위풀 링크를 누르면 새 창에서 타 사이트로 이동한다.

풀 메뉴에서는 내가 참여하는 풀의 유동성 정보만 볼수 있다. 내가 참여하는 풀을 개별 메뉴로 구분해놓은 것은 좋지만, 메뉴 이름을 My Pool, My Liquidity 정도로 바꾸어야할 것 같다.

나의 경우, 다른 서비스를 먼저 접하고 이자율을 비교해보고싶어 유니스왑에 접속했는데 빈 화면만있어 당황했던 경험이 있다. 대부분 다른 일드파밍 서비스들은 내가 참여하는 풀과 전체 풀 목록을 한 화면, 적어도 한 사이트에서 제공하기 때문이다.

하지만 이후 애널리틱스 페이지가 별개로 있는 디파이 앱들을 더 사용해보고 느끼게 된 점은, 애널리틱스 내부의 메뉴가 pool, farm, token 등으로 중복이 되어서 한 사이트에서 운영됟다면 오히려 사용자를 헷갈리게 만들 수 있다는 생각이 들었다.

그래서 내가 생각하는 최선의 방법은, 나의 풀 정보와 모든 풀 정보를 한 페이지에서 제공하되 버튼을 통해 애널리틱스 모드로 전환할수 있도록 하는 것이다. 만약 애널리틱스 사이트 분리가 필수라면 차선책은 풀 메뉴에는 나의 풀과 상위 5개 풀 정도의 정보만 제공하고 풀 페이지 링크를 눈에 띄게 가장 상단에 배치해야 한다. 가능한 한페이지에서 해결하는것이 좋을것 같지만..

다국어 지원. 그러나 당황스러운 번역..

구성이 심플하기 때문일지도 모르나 어쨌든 지갑 연결할때의 주의사항처럼 사용전 인식해야할 부분도 한국어로 안내하고있어 좋았다. 다만 조금 아쉬운건, 막상 연결된 약관과 면책 조항 사이트는 역시나 영어로만 제공하는 페이지였다. 대부분의 글로벌 사이트가 그렇기는하지만 너무 많은 것을 바라는 것일까.. 그러나 이 중 프로토콜 면책 조항에 적힌 일부 핵심 내용은 화면에 나타낼 공간이 충분했을 것 같다. 예를들면 이렇게.

⚠️

가격변동으로 인한 손실 위험성이 있으며, 사전에 프로토콜이 작동하는 방식과 수수료에 대해 이해해야할 책임이 사용자에게 있습니다.

그리고 스왑 메뉴에서 스왑 상세 설정 부분까지 한국어로 번역되었다는 점은 좋았으나 ‘Minimum received after slippage..’ 가 번역기를 사용한것 마냥 ‘최소수령됨 미끄러진 후..’ 라고 되어있어서 잠시 내 눈을 의심했다. 어렵겠지만 번역 퀄리티도 신경 써주었으면 좋겠다.

네트워크를 변경하면 메타마스크에서 네트워크를 변경하라는 창이 뜬다. 이걸 무시하고 닫아버렸더니 네트워크를 전환하지 못했다고 알려주는 메시지가 떴다. 다른 앱에서는 전환 실패를 따로 알려주는 경우를 보지 못한것 같다.

Outro

단 3개의 앱만 비교해 보았는데도 어떤점이 부족하고 참고할 만한지를 알 수 있었다. 물론 그동안 다양한 Dapp을 사용하며 느낀 점이기도하다. 대부분 글로벌을 대상으로 하므로 다국어 지원, 현재 평균 가스비를 띄워주는 것은 모든 Dapp에서 참고할만한 사항이다. 프로덕트 별로도 파밍만 제공한다면 스왑가능한 링크를 안내한다던가, 레이어 2 네트워크를 이용하는 프로덕트라면 브릿지 기능을 제공하거나 링크를 안내 한다거나. 다양하게 고려해볼수 있겠다.

다음에는 경험면에서 프로덕트별로 많은 차이가 난다고 생각했던 브릿지를 대상으로 분석해보면 좋을것같다.